// 导入 React 库中的 useState 和 useCallback 钩子函数
import React, { useState } from 'react';
// 导入 Ant Design 的图标组件
import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons';
// 导入图标映射对象
import IconMap from '../../utils/IconMap';
// 导入侧边栏的 CSS 样式
import "../../styles/components/sider.css";

// 定义 MenuItem 组件，接收 title、subMenu、onClick、icon、isSelected 和 onSelect 作为 props
function MenuItem({ title, children, onClick, icon, isSelected, onSelect }) {
    // 判断是否有子菜单
    const hasChildren = children && children.length > 0;
    // 使用 useState 钩子来管理子菜单展开状态
    const [isExpanded, setIsExpanded] = useState(false);

    // 定义处理切换展开状态的函数
    const handleToggleExpand = () => {
        setIsExpanded(!isExpanded); // 切换展开状态
    };

    // 处理菜单项点击事件的函数
    const handleMenuItemClick = () => {
        if (hasChildren) {
            handleToggleExpand(); // 如果有子菜单，切换展开状态
        } else if (onClick) {
            onClick(); // 调用父组件传入的点击事件处理函数
            onSelect(); // 调用父组件传入的选中事件处理函数
        }
    };

    // 渲染菜单项组件
    return (
        <div>
            {/* 菜单项的点击区域 */}
            <div onClick={handleMenuItemClick} className={`menu-item ${isSelected ? 'selected' : ''}`}>
                {/* 渲染菜单项的图标 */}
                {icon && <span className="icon-container">{IconMap[icon]}</span>}
                {/* 渲染菜单项的标题 */}
                <span>{title}</span>
                {/* 渲染展开/折叠按钮 */}
                {hasChildren && <button className='menu-button' onClick={handleToggleExpand}>{isExpanded ? <CaretDownOutlined /> : <CaretRightOutlined />}</button>}
            </div>
            {/* 如果菜单项展开且有子菜单，则渲染子菜单 */}
            {isExpanded && hasChildren && (
                <ul>
                    {/* 遍历渲染子菜单项 */}
                    {children.map((subMenuItem, subIndex) => (
                        <li key={subIndex} onClick={(e) => {
                            e.stopPropagation(); // 阻止事件冒泡
                            // 如果当前子菜单项没有子菜单，调用父组件传入的点击事件处理函数和选中事件处理函数
                            if (!subMenuItem.children || subMenuItem.children.length === 0) {
                                onSelect(subMenuItem.path);
                                onClick(subMenuItem.path, subMenuItem.title);
                            }
                        }} className={`sub-menu-item ${isSelected === subMenuItem.path ? 'selected' : ''}`}>
                            {/* 如果当前子菜单项有子菜单，则递归渲染 MenuItem 组件，否则渲染子菜单项的标题 */}
                            {subMenuItem.children && subMenuItem.children.length > 0 ? (
                                <MenuItem
                                    title={subMenuItem.title}
                                    children={subMenuItem.children}
                                    onClick={onClick}
                                    icon={subMenuItem.icon}
                                    isSelected={isSelected === subMenuItem.path}
                                    onSelect={(path) => onSelect(path)}
                                />
                            ) : (
                                subMenuItem.title
                            )}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}

// 导出 MenuItem 组件
export default MenuItem;
